<template>
    <div v-loading="loading"
         element-loading-text="k线图加载中...."
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(255, 255, 255, 0.)"
         class='chart' :id='id' ref='chart'></div>
</template>

<script>
import echarts from 'echarts';
import {getOneStock15DayInfo} from "@/api/stock";

export default {
    name: 'StockGraph',
    props:{
        // 唯一的标识符id
        id:{
            type:String,
            required:true
        },
        code:{
            type:String,
            required:true
        }
    },
    data(){
        return {
            option: {
                title: {
                    left: 'left',
                    text: '',
                    textStyle: {
                        color: '#909399',
                    }
                },
                type: 'stock',
                backgroundColor: '#ffffff',
                legend: {
                    data: ['日K', '5日均线', '10日均线', '20日均线', '30日均线'],
                    inactiveColor: '#777',
                    textStyle: {
                        color: '#4b4b46'
                    }
                },
                dataset: {
                    // 直接把数据放进source就渲染完了
                    source: null
                },
                // dataZoom是设置最下方的滑动条型数据区域缩放组件,不需要可以删除
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 100
                }, {
                    type: 'slider',
                    height: 8,
                    bottom: 20,
                    borderColor: 'transparent',
                    backgroundColor: '#e2e2e2',
                    handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
                    handleSize: 20,
                    handleStyle: {
                        shadowBlur: 6,
                        shadowOffsetX: 1,
                        shadowOffsetY: 2,
                        shadowColor: '#aaa'
                    }
                }],
                tooltip: {
                    confine: true,
                    trigger: 'axis',
                    axisPointer: {
                        animation: false,
                        type: 'cross',
                        lineStyle: {
                            color: '#376df4',
                            width: 2,
                            opacity: 1
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    axisLine: {lineStyle: {color: '#8392A5'}}
                },
                yAxis: {
                    scale: true,
                    axisLine: {lineStyle: {color: '#8392A5'}},
                    splitLine: {show: true}
                },
                series: [
                    {
                        type: 'candlestick',
                        name: '日K',
                        // 重点
                        encode: {
                            // 日期作为X轴
                            x: '日期',
                            //这里是将["开盘", "收盘", "最高", "最低"]四个属性渲染到K线图上
                            y: ["开盘", "收盘", "最高", "最低"],
                            //这里是将["开盘", "收盘", "最高", "最低"，"涨幅", "成交量"]显示在tooltip上
                            tooltip: ["开盘", "收盘", "最高", "最低"]
                        },
                        // 设置K线颜色
                        itemStyle: {
                            normal: {
                                color: '#FD1050',
                                color0: '#0CF49B',
                                borderColor: '#FD1050',
                                borderColor0: '#0CF49B'
                            }
                        },
                    },
                    {
                        name: '5日均线',
                        type: 'line',
                        encode: {
                            x: '日期',
                            y: '5日均线',
                        },
                        smooth: true,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1
                            }
                        }
                    },
                    {
                        name: '10日均线',
                        type: 'line',
                        encode: {
                            // 将 "product" 列映射到 X 轴。
                            x: '日期',
                            // 将 "product" 列映射到 Y 轴。
                            y: '10日均线'
                        },
                        smooth: true,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1
                            }
                        }
                    },
                    {
                        name: '20日均线',
                        type: 'line',
                        encode: {
                            // 将 "product" 列映射到 X 轴。
                            x: '日期',
                            // 将 "product" 列映射到 Y 轴。
                            y: '20日均线'
                        },
                        smooth: true,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1
                            }
                        }
                    },
                    {
                        name: '30日均线',
                        type: 'line',
                        smooth: true,
                        encode: {
                            x: '日期',
                            y: '30日均线'
                        },
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1
                            }
                        }
                    }
                ]
            },
            dataSet:[["日期", "开盘", "收盘", "最高", "最低","5日均线", "10日均线", "20日均线", "30日均线"]],
            rawData:[],
            loading:false
        }
    },
    methods:{
        initGraph(){
            let myChart = echarts.init(this.$refs.chart);
            myChart.setOption(this.option)
        },
    },
   async beforeMount() {
        this.loading=true
        await getOneStock15DayInfo(this.code).then((response)=>{
            let data=response.data.data
            this.rawData=data.detailStock
            this.rawData.reverse()
            console.log(this.rawData)
        }).catch((err)=>{
            console.log(err)
        })
       this.dataSet.push.apply(this.dataSet,this.rawData)
       this.option.dataset.source=this.dataSet
       setTimeout(()=>{
           this.initGraph()
           this.loading=false
       },400)
   },
};
</script>

<style scoped>
.chart{
    width: 100%;
    height: 100%;
}
</style>